<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="关键词搜索">
              <a-input placeholder="请输入收费项名称/编码" v-model="queryParam.queryName"></a-input>
            </a-form-item>
          </a-col>

<!--          <a-col :xl="6" :lg="7" :md="8" :sm="24">-->
<!--            <a-form-item label="创建时间">-->
<!--              <j-date placeholder="请选择创建时间" v-model="queryParam.queryTime"></j-date>-->
<!--            </a-form-item>-->
<!--          </a-col>-->

          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-select @change="change_dingzhiInfo" v-model="select_topcategory" style="color: #a09d9d" placeholder="请选择收费类型">
              <a-select-option :value="item.id" v-for="item in categoryList" >{{ item.premiumItem }}</a-select-option>
            </a-select>
          </a-col>

          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" style="color: #F9D532;width: 80px;height: 36px;background: #333333;border-style: none;">查询</a-button>
              <a-button type="primary" @click="searchReset" style="margin-left: 8px;width: 80px;height: 36px;background: #eae7e7;border-style: none;color: #323232">重置</a-button>
            </span>
          </a-col>

          <a-button type="primary" @click="add_category(0)" icon="plus" style="color: #F9D532;font-size: 12px;width: 140px;height: 34px;background: #333333;border-style: none;float: left;">新增收费类型</a-button>
          <a-button type="primary" @click="showdingzhi_list" style="color: #F9D532;font-size: 12px;width: 110px;height: 34px;background: #333333;border-style: none;float: left;margin-left: 10px;">刷新收费类型</a-button>

<!--          <a-button type="primary" @click="add_category(0)" icon="plus" style="color: #F9D532;width: 128px;height: 36px;background: #333333;border-style: none;float: right;margin-right: 16px;">新增加急项</a-button>-->
        </a-row>
      </a-form>
    </div>


    <div style="background: #f2f2f2;height: 5px;width: auto;margin-top: 10px;margin-bottom: 15px;"></div>

    <div>
      <div>
        <span style="font-size: 24px;color: #2d2d2d;font-weight: bolder">{{dingzhiName}}</span>
        <span style="font-size: 13px;color: #aaa8a8;margin-left: 30px;">序号：{{dingzhiXu}}</span>
        <span style="font-size: 13px;color: #aaa8a8;margin-left: 15px;">编号：{{dingzhiCode}}</span>
        <span style="font-size: 13px;color: #aaa8a8;margin-left: 15px;">新增时间：{{dingzhiTime}}</span>

        <div style="float: right;margin-right: 16px;margin-top: 10px;">
          <a><span style="font-size: 14px;color: #585858;margin-top: 5px;float: left" @click="() => add_category(dingzhiId)">编辑</span></a>
          <a-menu-item style="margin-left: 10px;float: left;margin-top: 4px;">
            <a-popconfirm title="确定删除收费类型吗?" @confirm="() => delete_dingzhi(select_topcategory)">
              <a style="font-size: 14px;color: #585858;">删除</a>
            </a-popconfirm>
          </a-menu-item>
        </div>
      </div>
      <div>
        <span style="font-size: 13px;color: #585858;margin-top: 10px;">备注：{{dingzhiRemark}}</span>
      </div>
    </div>

    <div style="background: #f2f2f2;height: 10px;width: auto;margin-top: 16px;margin-bottom: 30px;"></div>

    <div>
      <div style="border: none;background-color: #ffffff;padding-bottom: 28px;margin-bottom: 10px;">
        <span style="font-size: 16px;float: left;color:#000000;font-weight: bold;">收费项列表</span>
        <a-button type="primary" @click="add_categoryCanshu(select_topcategory)" style="color: #F9D532;width: 105px;height: 34px;background: #333333;border-style: none;float: right;">新增收费项</a-button>
      </div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        class="j-table-force-nowrap"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange" style="margin-top: 6px;">

        <template slot="avatarslot" slot-scope="text, record, index">
          <div class="anty-img-wrap">
            <a-avatar shape="square" :src="getAvatarView(record.img)" icon="img"/>
          </div>
        </template>

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="uploadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <div align="center" style="align-content: center;margin-left: 30px;">
           <a @click="add_categoryCanshu(record)" style="float: left;margin-left: 10px;font-size: 14px;color: #d29328;">编辑</a>
           <a-menu-item style="margin-left: 16px;float: left;margin-top: 0px;">
            <a-popconfirm title="确定删除该收费项吗?" @confirm="() => delete_huchi(record.id)">
              <a style="font-size: 14px;color: #d29328;">删除</a>
            </a-popconfirm>
          </a-menu-item>
          </div>
        </span>
      </a-table>
    </div>

    <AddSystemPriceTopModule ref="modalForm1" @ok="modalFormOk"></AddSystemPriceTopModule>
    <AddSystemPriceModule ref="modalForm" @ok="modalFormOk"></AddSystemPriceModule>
  </a-card>
</template>

<script>

  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import JDate from '@/components/jeecg/JDate.vue'
  import '@/assets/less/TableExpand.less'
  import AddSystemPriceModule from './modules/AddSystemPriceModule'
  import AddSystemPriceTopModule from './modules/AddSystemPriceTopModule'
  import { httpAction, postAction, getAction,getFileAccessHttpUrl } from '@/api/manage'

  export default {
    name: "categoryinfo",
    mixins:[JeecgListMixin],
    components: {
      JDate,
      AddSystemPriceModule,
      AddSystemPriceTopModule
    },
    data () {
      return {
        description: 'categoryinfo管理页面',
        select_topcategory:'请选择收费类型',//选中的定制项id
        dingzhiName:'',//定制项名称
        dingzhiId:'',//定制项id
        dingzhiXu:'',//定制项序号
        dingzhiCode:'',
        dingzhiTime:'',
        dingzhiRemark:'',
        categoryList: [],
        select_dingzhi:[],//选中的定制项
        // 表头
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'收费项名称',
            align:"center",
            dataIndex: 'premiumItem'
          },
          {
            title:'编号',
            align:"center",
            dataIndex: 'premiumCode'
          },
          {
            title:'排序',
            align:"center",
            dataIndex: 'numbers',
            // customRender(index) {
            //   if(index=='4'){
            //     return "式样"
            //   }else if(index=='5'){
            //     return "紧急指数"
            //   }else {
            //     return "改款打样"
            //   }
            // }
          },
          {
            title:'备注',
            align:"center",
            dataIndex: 'remark'
          },
          {
            title:'创建时间',
            align:"center",
            dataIndex: 'createTime',
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            scopedSlots: { customRender: 'action' },
          }
        ],
        url: {
          list: "/admin/parameter/category_addprice_list?category_id="+this.$route.query.category_id+"&partent_id="+this.dingzhiId,
          delete_leibie: "/admin/parameter/delete_test_addpriceinfo",
          query_dingzhiList:'/admin/parameter/query_all_topaddsysprice',
          query_dingzhiDetail:'/admin/parameter/query_syspriceByid',
          delete_addpriceByid:'/admin/parameter/delete_test_addpriceinfo'
        }
      }
    },
    created () {
      this.showdingzhi_list();
    },
    methods: {
      showdingzhi_list() {//查询定制项列表
        let params = {category_id:this.$route.query.category_id};
        getAction(this.url.query_dingzhiList,params).then((res)=>{
          if(res.success){
            this.categoryList = res.result;
            let params = {dinghzi_id:res.result[0].id};
            getAction(this.url.query_dingzhiDetail,params).then((res)=>{
              // console.info(res);
              if(res.success){
                this.dingzhiName=res.result.premiumItem;
                this.dingzhiId=res.result.id;
                this.select_topcategory = res.result.id;
                this.dingzhiXu=res.result.numbers;
                this.dingzhiCode=res.result.premiumCode;
                this.dingzhiTime=res.result.createTime;
                this.dingzhiRemark=res.result.remark;
                this.url.list = "/admin/parameter/category_addprice_list?category_id="+this.$route.query.category_id+"&partent_id="+res.result.id
                this.loadData();
              }else {
                this.$message.error("查询失败1");
              }
            });
          }else {
            this.dingzhiName='暂无';
            this.dingzhiXu='暂无';
            this.dingzhiCode='暂无';
            this.dingzhiTime='暂无';
            this.dingzhiRemark='暂无';
          }
        });
      },
      change_dingzhiInfo(){//查询定制项详情
        let params = {dinghzi_id:this.select_topcategory};
        getAction(this.url.query_dingzhiDetail,params).then((res)=>{
          if(res.success){
            // alert(res.result.id);
            this.select_dingzhi = res.result;
            this.dingzhiName=res.result.premiumItem;
            this.dingzhiId=res.result.id;
            this.select_topcategory = res.result.id;
            this.dingzhiXu=res.result.numbers;
            this.dingzhiCode=res.result.premiumCode;
            this.dingzhiTime=res.result.createTime;
            this.dingzhiRemark=res.result.remark;
            this.url.list = "/admin/parameter/category_addprice_list?category_id="+this.$route.query.category_id+"&partent_id="+res.result.id
            this.loadData();
          }else {
            // this.$message.error("查询失败33");
          }
        });
      },
      delete_dingzhi(id){//删除
        let params = {canshu_id:id};
        httpAction(this.url.delete_addpriceByid,params,"put").then((res)=>{
          if(res.success){
            this.$message.success(res.message);
            this.categoryList=[];
            this.showdingzhi_list();
          }else {
            this.$message.error(res.message);
          }
        });
      },
      getAvatarView: function (avatar) {
        return getFileAccessHttpUrl(avatar)
      },
      add_category(record) {
        if(record=="0"){
          this.$refs.modalForm1.title = "新增收费类型";
        }else {
          this.$refs.modalForm1.title = "编辑收费类型";
        }
        this.$refs.modalForm1.edit(record);
        this.$refs.modalForm1.disableSubmit = true;
      },
      add_categoryCanshu(record){//添加参数
        if(record.id!=undefined && record.id!=null){
          this.$refs.modalForm.title = "编辑收费项";
        }else {
          this.$refs.modalForm.title = "新增收费项";
        }
        this.$refs.modalForm.edit(record);
        this.$refs.modalForm.disableSubmit = true;
      },
      delete_huchi(id){
        let params = {canshu_id:id};
        httpAction(this.url.delete_addpriceByid,params,"put").then((res)=>{
          if(res.success){
            this.$message.success(res.message);
            this.loadData();
          }else {
            this.$message.error(res.message);
          }
        });
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>